<template>
    <div>
<!--        <transition name="fade"-->
<!--                    type="transition"-->
<!--                    :duration="{enter:5000,leave:10000}"-->
<!--                    appear-->
<!--                    enter-active-class="animated swing fade-enter-active"-->
<!--                    leave-active-class="animated shake fade-leave-active"-->
<!--                    appear-active-class="animated swing"-->
<!--        >-->
<!--&lt;!&ndash;          type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束&ndash;&gt;-->
<!--&lt;!&ndash;          appear-active-class 在页面刷新的时候展示动画效果&ndash;&gt;-->
<!--&lt;!&ndash;         :duration="5000" 自定义动画时长 在此结束后才移除class&ndash;&gt;-->
<!--            <div v-if="show">hello world</div>-->
<!--        </transition>-->


<!--     多个元素/组件过渡 -->
<!--      <transition name="fade"-->
<!--                  mode="out-in"-->
<!--      >-->
<!--        mode="in-out" 先出现再隐藏-->
<!--        <div v-if="show" key="hello">hello world</div>-->
<!--        <div v-else  key="bye">Bye world</div>-->
<!--&lt;!&ndash;        一定要加key值，不然vue的dom复用机制会使动画渲染不上&ndash;&gt;-->
<!--      </transition>-->
<!--        <button @click="handleClick">切换</button>-->

<!--      <transition name="fade"-->
<!--                  mode="out-in"-->
<!--      >-->
<!--&lt;!&ndash;        动态组件&ndash;&gt;-->
<!--        <component :is="type"></component>-->
<!--      </transition>-->
<!--      <button @click="handleComp">组件动画</button>-->

<!--      列表过渡-->
<!--      <transition-group>-->
<!--        <div v-for="(item,index) in list" :key="item.id">-->
<!--          {{item.context}}-->
<!--        </div>-->
<!--      </transition-group>-->
<!--      <button @click="handleBtnClick">列表过渡</button>-->

<!--      动画封装-->
      <fade :show="show">
        <h1 >hello world</h1>
      </fade>
      <button @click="handleFade">动画封装</button>
<!--      <router-link to="/foo">11</router-link>-->
    </div>

</template>

<script>
    export default {
        name: "animate-test",
        data(){
            return{
                show:true,
              type:'child',
              list:[],
              count:0,
            }
        },
      components:{
          'child':{
            template:"<div>child</div>"
          },
        'child-one':{
          template:"<div>child-one</div>"
        },
        'fade':{
            //推荐将动画封装到methods里,而不是style里
            template:`<transition name="fengzhuang" @before-enter="handleBeforeEnter"
                                  @enter="handleEnter"
            ><slot v-if="show"></slot></transition>`,
          props:['show'],
          methods: {
            handleBeforeEnter(el){
              el.style.color = 'red'
            },
            handleEnter(el,done){
              setTimeout(() => {
                el.style.color = 'green';
                done()
              },2000)
            }
          }
        }
      },
        methods:{
            handleClick(){
                this.show = !this.show
            },
          handleComp(){
              this.type = this.type === 'child' ? 'child-one' : "child"
          },
          handleBtnClick(){
              this.list.push({
                id:this.count++,
                context:"hello world"
              })
          },
          handleFade(){
            this.show = !this.show
          }
        }
    }
</script>

<style scoped>
    /*@keyframes bounce-in {*/
    /*0% {*/
    /*    transform: scale(0);*/
    /* }*/
    /*    50% {*/
    /*    transform: scale(1.5);*/
    /* }*/
    /*    100% {*/
    /*    transform: scale(1);*/
    /* }*/
    /*}*/
    .fade-enter,.fade-leave-to {
        opacity: 0;
    }
    .fade-enter-active {
        transform-origin: left center;
        /*animation: bounce-in 1s;*/
        transition: opacity 1s;
    }
    .fade-leave-active {
        transform-origin: left center;
        /*animation: bounce-in 1s reverse;*/
        transition: opacity 1s;
    }
  .v-enter, .v-leave-to {
    opacity: 0;
  }
  .v-enter-active, .v-leave-active {
    transition: opacity 1s;
  }
</style>
